.usher{
    .usher-title{
        font-weight: var(--tiklab-font-weight-bold);
        padding-bottom: var(--tiklab-padding-item);
    }
    .usher-nav{
        padding-bottom:15px;
    }
    .usher-segment{
        margin-top: var(--tiklab-padding-item);
        .usher-segment-url{
            .usher-url{
                display: flex;
                flex-direction: row;
                align-items: center;
                .usher-url-switch{
                    display: inline-flex;
                    margin-right: var(--tiklab-padding-item);
                    background: #f4f4f4;
                    padding: 2px;
                    .url-switch-prefix{
                        padding: 6px 12px;
                        cursor: pointer;
                        &:first-child{
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                            border-right: 1px solid #d9d9d9;
                        }
                        &:last-child{
                            border-top-right-radius: 4px;
                            border-bottom-right-radius: 4px;
                        }
                    }
                    .prefix-active{
                        background: #ffffff;
                    }
                }
                .usher-url-input{
                    display: inline-flex;
                    align-items: center;
                    min-width: 320px;
                    .ant-input{
                        border-right-color: transparent;
                    }
                    .url-input-icon{
                        cursor: pointer;
                        border: 1px solid #d9d9d9;
                        background: #f5f5f5;
                        border-left-color: transparent;
                        padding: 8px;
                        margin-left: -1px;
                    }
                }
            }
            .usher-suggest{
                margin: var(--tiklab-padding-item) 0;
                .usher-suggest-item{
                    padding: 2px 4px;
                    background-color: #f7f7f9;
                    border: 1px solid #e1e1e8;
                    white-space: nowrap;
                    font-weight: normal;
                }
            }
            .usher-readme{
                margin-bottom: var(--tiklab-padding-item);
                cursor: pointer;
                padding: 6px 15px;
                border: 1px solid var(--tiklab-blue);
                color: var(--tiklab-blue);
                display: inline-block;
            }
        }
        .usher-segment-course{
            .usher-course-item{
                &:not(:last-child){
                    margin-bottom: var(--tiklab-padding-item);
                }
                .course-item-name{
                    font-weight:400;
                    padding-bottom: var(--tiklab-padding-item);
                }
                .course-item-name-desc{
                    color: #707070;
                    padding-bottom: var(--tiklab-padding-item);
                }
                .course-item-content{
                    background: #222222;
                    color: #ffffff;
                    padding: 10px;
                    white-space: pre-wrap;
                }
            }
        }
    }
}
